<template>
    <view class="box">
        <view class="box-bg">
            <view class="tui-header-box" :style="{ height: height + 'rpx',top:top*2+'rpx', background: 'rgba(255,255,255,0)' }">
                <view class="tui-header-icon" @click="toLeft()">
                    <uni-icons type="left" size="22" color="#FFF"></uni-icons>
                </view>
                <view class="header-text">
                    <view class="header-name">发票详情</view>
                </view>
            </view>
            
            <view class="order-stutas-box">
                <view class="order-icon">
                    <image :src="`${picUrl}/jh-1/5.png`"></image>
                </view>
                <view class="order-icon-1">
                    <view class="order-icon-2">开票中</view>
                    <view class="order-icon-3">发票金额：¥2000.00</view>
                </view>
            </view>
        </view>
        <view class="box-card" style="margin-top: -66rpx;">
            <view class="lable">发票信息</view>
            <view class="box-card-list">
                <view class="card-list-1">姓名：</view>
                <view class="card-list-2">张依依</view>
            </view>
            <view class="box-card-list">
                <view class="card-list-1">联系电话：</view>
                <view class="card-list-2">13689558952</view>
            </view>
            <view class="box-card-list">
                <view class="card-list-1">E-mail：</view>
                <view class="card-list-2">1058263935@163.com</view>
            </view>
            <view class="box-card-list">
                <view class="card-list-1">发票类型：</view>
                <view class="card-list-2">电子普通发票</view>
            </view>
            <view class="box-card-list">
                <view class="card-list-1">发票内容：</view>
                <view class="card-list-2">商品明细</view>
            </view>
            <view class="box-card-list">
                <view class="card-list-1">抬头类型：</view>
                <view class="card-list-2">个人</view>
            </view>
            <view class="box-card-list">
                <view class="card-list-1">开票金额：</view>
                <view class="card-list-2">¥2000.00</view>
            </view>
            <view class="box-card-list">
                <view class="card-list-1">申请时间：</view>
                <view class="card-list-2">2022-02-22 19:43:18</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                height: 88,
                top: 20,
            }
        },
        onLoad() {
            let obj = {};
            uni.getSystemInfo({
                success: res => {
                    this.top = res.statusBarHeight;
                }
            });
        },
        methods: {
            toLeft() {
                uni.navigateBack({
                    delta:1,
                    fail() {
                        uni.switchTab({
                            url:'/main/home/index'
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    /deep/ .uni-navbar--fixed {
        background: linear-gradient(200deg, #EA8C1E 0%, #E84A1D 100%);
    }
    .tui-header-box {
    	position: fixed;
    	left: 30rpx;
        right: 0;
    	top:40rpx;
    	z-index: 9995;
        display: flex;
        align-items: center;
    	.tui-header-icon {
    		image {
    		    width: 307rpx;
    		    height: 30rpx;
    		}
    	}
        .header-text{
            width: 100%;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            .header-name {
                font-size: 36rpx;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 600;
                color: #FFFFFF;
                padding-right: 36rpx;
            }
        }
    }
    .box-bg {
        width: 100%;
        height: 436rpx;
        background: linear-gradient(315deg, #EA8C1E 0%, #E84A1D 100%);
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        opacity: 1;
        position: relative;
        .order-stutas-box{
            display: flex;
            align-items: center;
            position: absolute;
            left: 30rpx;
            right: 30rpx;
            bottom: 124rpx;
            .order-icon{
                width: 80rpx;
                height: 80rpx;
                image{
                    width: 80rpx;
                    height: 80rpx;
                }
            }
            .order-icon-1{
                margin-left: 30rpx;
                .order-icon-2{
                    font-size: 40rpx;
                    font-family: PingFang SC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #FFFFFF;
                }
                .order-icon-3{
                    font-size: 28rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
        }
    }
    
    .box-card{
        position: absolute;
        left: 0;
        right: 0;
        background: #FFFFFF;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        opacity: 1;
        padding: 20rpx;
        margin: 30rpx;
        .lable{
            font-size: 30rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #323232;
        }
        .box-card-list{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30rpx;
            .card-list-1{
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }
            .card-list-2{
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #646464;
            }
        }
    }
    
    .order-list-1 {
        background-color: #FFF;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        display: flex;
        flex-direction: column;
        // padding: 30rpx;
        position: relative;
        //margin-bottom: 30rpx;
    
        .order-list-1-subscript {
            width: 130rpx;
            height: 130rpx;
    
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
        }
    
        .order-list-info {
            display: flex;
            justify-content: space-between;
    
            .order-shopname {
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #323232;
                display: flex;
                flex-direction: row;
                align-items: center;
    
                .shop-icon {
                    width: 38rpx;
                    height: 38rpx;
                    background: linear-gradient(180deg, #EA8C1E 0%, #E84A1D 100%);
                    opacity: 1;
    
                    font-size: 20rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
    
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    margin-right: 10rpx;
                    
                    text{
                        transform: scale(0.8);
                        font-family: 500;
                    }
                }
            }
    
            .order-stutas {
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #E96A1D;
            }
            .order-stutas2 {
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #323232;
            }
        }
    
        .order-list-2 {
            display: flex;
            margin-top: 20rpx;
            padding-bottom: 30rpx;
            border-bottom: 2rpx solid #EEEEEE;
    
            .order-list-icon {
                width: 200rpx;
                height: 200rpx;
    
                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 5rpx;
                }
            }
    
            .order-info {
                margin-left: 30rpx;
                position: relative;
                width: 100%;
                .order-name {
                    font-size: 28rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #323232;
                }
                .order-name-sp-list{
                    .order-name-sp{
                        height: 32rpx;
                        font-size: 24rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #909090;
                    }
                }
                .order-text-list{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 13rpx;
                    .order-price {
                        font-size: 30rpx;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #E96A1D;
                    }
                    .order-count {
                        font-size: 24rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #323232;
                    }
                }
                .order-text {
                    position: absolute;
                    bottom: 43rpx;
                    left: 0;
                    right: 0;
                    display: flex;
                    align-items: center;
    
                    .order-price {
                        font-size: 30rpx;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #E96A1D;
                    }
    
                    .order-score {
                        font-size: 30rpx;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #909090;
                    }
    
                    /deep/ .uni-rate {
                        margin-top: 10rpx;
                    }
    
                    .order-score-icon {
                        display: flex;
                        align-items: center;
                    }
                }
    
                .order-text2 {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
    
                    .order-count {
                        font-size: 24rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #323232;
                    }
    
                    .order-num {
                        font-size: 24rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #323232;
                    }
                }
            }
        }
        .order-text{
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #909090;
            margin-bottom: 16rpx;
        }
    }
    
    .order-list-but {
        position: absolute;
        left: 0;
        right: 0;
        // bottom: 0;
        padding: 0 30rpx;
        height: 96rpx;
        // margin-top: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background-color: #FFF;
        bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
        bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
        .look-but-1{
            width: 160rpx;
            height: 70rpx;
            background: #FFFFFF;
            border-radius: 50rpx 50rpx 50rpx 50rpx;
            opacity: 1;
            border: 2rpx solid #E96A1D;
            
            display: flex;
            align-items: center;
            justify-content: center;
            
            font-size: 28rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #E96A1D;
        }
        .look-but{
            width: 160rpx;
            height: 70rpx;
            background: #FFFFFF;
            border-radius: 50rpx 50rpx 50rpx 50rpx;
            opacity: 1;
            border: 2rpx solid #323232;
            
            display: flex;
            align-items: center;
            justify-content: center;
            
            font-size: 28rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #323232;
            margin-left: 20rpx;
        }
        .grounding {
            display: flex;
            width: 140rpx;
            height: 60rpx;
            background: #F7F7F7;
            border-radius: 50rpx;
            opacity: 1;
            font-size: 28rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #323232;
    
            display: flex;
            justify-content: center;
            align-items: center;
    
            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }   
    }
</style>